<script setup name="Markdown">
import { Editor, Viewer } from '@bytemd/vue-next'
import highlight from '@bytemd/plugin-highlight'
import 'bytemd/dist/index.css'
import 'highlight.js/styles/default.css'
import gfm from '@bytemd/plugin-gfm'
import 'bytemd/dist/index.css'

const mdVal = ref('')

const plugins = [gfm(),highlight()]

const handleChange = (val) => mdVal.value = val
</script>

<template>
  <page-wrapper>
    <editor :value="mdVal" :plugins="plugins" @change="handleChange" ></editor>
  </page-wrapper>
</template>

<style lang="less" scoped>
</style>